<template>
  <button
    class="nes-btn"
    :class="[typeClass, sizeClass, fontClass]"
    :style="customStyle"
    @click="$emit('click', $event)"
  >
    <slot>button</slot>
  </button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  type: { type: String, default: 'default' }, // 按钮类型 primary, success, warning, error, info,disabled, default
  size: { type: String, default: 'small' }, // 按钮尺寸 small,  large
  font: { type: String, default: 'Press Start 2P, Consolas, monospace' }, // 字体
  color: { type: String, default: '' }, // 字体颜色
  bgColor: { type: String, default: '' }, // 按钮背景色
  width: { type: [String, Number], default: '' },
  height: { type: [String, Number], default: '' },
  fontSize: { type: [String, Number], default: '' },
})

const typeClass = computed(() => {
  if (!props.type || props.type === 'default') return ''
  return `is-${props.type}`
})
const sizeClass = computed(() => {
  if (props.size === 'small') return 'pixel-btn-small'
  if (props.size === 'large') return 'pixel-btn-large'
  return ''
})
const fontClass = computed(() => {
  return '' // 预留自定义字体class
})
const customStyle = computed(() => {
  const style = {}
  if (props.color) style.color = props.color
  if (props.bgColor) style.background = props.bgColor
  if (props.width) style.width = typeof props.width === 'number' ? props.width + 'px' : props.width
  if (props.height) style.height = typeof props.height === 'number' ? props.height + 'px' : props.height
  if (props.fontSize) style.fontSize = typeof props.fontSize === 'number' ? props.fontSize + 'px' : props.fontSize
  if (props.font) style.fontFamily = props.font
  return style
})
</script>

<style scoped>
.nes-btn {
  font-family:  'Press Start 2P', 'zpix';
  /* min-width: 120px; */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pixel-btn-small {
  font-size: 14px;
  /* min-width: 120px; */
  /* min-height: 32px; */
  padding: 0.4em 1.2em;
}
.pixel-btn-large {
  font-size: 22px;
  /* min-width: 160px; */
  /* min-height: 60px; */
  padding: 1.1em 2.8em;
}
</style>
